<template>
	<view>
		<view class="kuang" style="margin-top: 20rpx;position: relative;">
			<view class="title">温馨提示</view>
			<view style="color: #999;font-size: 28rpx;padding-right: 200rpx;">
				如您需要修改店铺名称与店铺地址请联系客服：
				<text style="color: #38D180;">{{ tel }}</text>
			</view>
			<image src="../../static/images/bar-phone.png" style="width: 100rpx;height: 100rpx;position: absolute;right: 10rpx;top: calc(50% - 50rpx);" @tap="gophone()"></image>
		</view>
		<view class="input-container" style="margin-top: 20rpx;">
			<view class="title">基本资料</view>
			<view class="uni-row input-item ">
				<view class="input-name">店铺名称</view>
				<view class="input"><input type="text" v-model="name" placeholder="请填写店铺名称" placeholder-style="font-size:28rpx;color:#999999" disabled="true" /></view>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">店铺地址</view>
				<view class="input"><input type="text" v-model="address" placeholder="请填写店铺地址" placeholder-style="font-size:28rpx;color:#999999" disabled="true" /></view>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">手机号</view>
				<view class="input"><input type="text" v-model="phone" placeholder="填写手机号" placeholder-style="font-size:28rpx;color:#999999" /></view>
			</view>
		</view>
		<view class="input-container" style="margin-top: 20rpx;">
			<view class="title">营业时间</view>
			<view class="uni-row input-item input-relact">
				<view class="input-name">开始时间</view>
				<view class="input">
					<input
						type="text"
						v-model="start_time"
						placeholder="请选择开始时间"
						@click="onShowDatePicker('time', 'start')"
						placeholder-style="font-size:28rpx;color:#999999"
						disabled="true"
					/>
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
			<view class="uni-row input-item input-relact">
				<view class="input-name">结束时间</view>
				<view class="input">
					<input
						type="text"
						v-model="end_time"
						placeholder="请选择结束时间"
						@click="onShowDatePicker('time', 'end')"
						placeholder-style="font-size:28rpx;color:#999999"
						disabled="true"
					/>
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
		</view>
		<view class="input-container" style="margin-top: 20rpx;">
			<view class="title">店铺信息</view>
			<view class="uni-row input-item input-relact" @tap="showbiaoyan()">
				<view class="input-name">表演</view>
				<view class="input">
					<input type="text" v-model="selctedbiao.perform_name" placeholder="请选择表演类型" placeholder-style="font-size:28rpx;color:#999999" disabled="true" />
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">桌子</view>
				<view class="input"><input type="number" placeholder="请填写店内桌数" v-model="desk" placeholder-style="font-size:28rpx;color:#999999" /></view>
			</view>
			<view class="uni-row input-item input-relact" @tap="showxiyan()">
				<view class="input-name">吸烟</view>
				<view class="input">
					<input type="text" v-model="selctedxiyan.name" placeholder="请选择店内可否吸烟" placeholder-style="font-size:28rpx;color:#999999" disabled="true" />
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">啤酒</view>
				<view class="input"><input type="number" v-model="beer" placeholder="请填写店内啤酒种类数" placeholder-style="font-size:28rpx;color:#999999" /></view>
			</view>
			<view class="uni-row input-item input-relact" @tap="showtiaojiu()">
				<view class="input-name">调酒</view>
				<view class="input">
					<input type="text" v-model="selctedtiaojiu.name" placeholder="请选择店内是否有调酒" placeholder-style="font-size:28rpx;color:#999999" disabled="true" />
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
			<view class="uni-row input-item input-relact" @tap="chifanshow()">
				<view class="input-name">吃饭</view>
				<view class="input">
					<input type="text" v-model="selctedchi.dine_name" placeholder="请选择店内餐饮类型" placeholder-style="font-size:28rpx;color:#999999" disabled="true" />
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
		</view>
		<view class="input-container">
			<view class="title">上传门头照片或者门店logo</view>
			<view class="uni-row">
				<view class="up-item" v-if="logo.length != 0">
					<view class="up-img-container">
						<image src="../../static/images/del-icon.png" class="del-icon" @tap="delimg(1)"></image>
						<image :src="logo[0].img" class="up-img" @tap="yulan(logo[0].img)"></image>
					</view>
				</view>
				<view class="up-item" v-if="logo.length == 0">
					<view class="up-img-container"><image src="../../static/images/upload.png" class="up-img" @tap="upload(1)"></image></view>
				</view>
			</view>
		</view>
		<view class="input-container">
			<view class="title">上传照片</view>
			<view class="uni-row">
				<view class="up-item" v-for="(item, index) in imgs" :key="index">
					<view class="up-img-container">
						<image src="../../static/images/del-icon.png" class="del-icon" @tap="delimgs" :data-index="index"></image>
						<image :src="item.img" class="up-img" @tap="yulan(item.img)"></image>
					</view>
				</view>
				<view class="up-item">
					<view class="up-img-container"><image src="../../static/images/upload.png" class="up-img" @tap="upload(2)"></image></view>
				</view>
			</view>
		</view>
		<view class="input-container">
			<view class="title">海报照片（641*440像素）</view>
			<view class="uni-row">
				<view class="up-item" v-if="poster.length != 0">
					<view class="up-img-container">
						<image src="../../static/images/del-icon.png" class="del-icon" @tap="delimg(2)"></image>
						<image :src="poster[0].img" @tap="yulan(poster[0].img)" class="up-img"></image>
					</view>
				</view>
				<view class="up-item" v-if="poster.length == 0">
					<view class="up-img-container"><image src="../../static/images/upload.png" class="up-img" @tap="upload(3)"></image></view>
				</view>
			</view>
		</view>
		<view class="input-container">
			<view class="title">店铺活动</view>
			<textarea
				maxlength="50"
				v-model="signature"
				style="width: 638rpx;background: #F5F5F9;border-radius: 5px;display: block;margin: auto;height: 221rpx;padding: 32rpx;"
				placeholder="请填写店铺签名，字数不超过50字"
				placeholder-style="font-size:28rpx;color:#999999"
			></textarea>
		</view>
		<view class="input-container">
			<view class="title">店铺简介</view>
			<textarea
				v-model="description"
				style="width: 638rpx;background: #F5F5F9;border-radius: 5px;display: block;margin: auto;height: 482rpx;padding: 32rpx;"
				placeholder="请填写店铺简介"
				placeholder-style="font-size:28rpx;color:#999999"
			></textarea>
		</view>
		<view class="input-container">
			<view class="title">海报文案</view>
			<textarea
				maxlength="100"
				v-model="poster_synopsis"
				style="width: 638rpx;background: #F5F5F9;border-radius: 5px;display: block;margin: auto;height: 221rpx;padding: 32rpx;"
				placeholder="请填写分享海报文案，字数不超过100字"
				placeholder-style="font-size:28rpx;color:#999999"
			></textarea>
		</view>
		<button class="big-btn" @tap="save()">{{ btn_text }}</button>
		<!-- 表演选择框 -->
		<view class="tanchukuang" v-show="biaoyan_show">
			<view class="mark"></view>
			<view class="phone-kuang">
				<view class="bang-title">选择表演类型</view>
				<scroll-view class="gundong" scroll-y="true">
					<view class="">
						<view class="xuanze-item" v-for="(item, index) in biaoyanlist" :key="index" :data-id="item.id" @tap="xuanzebiaoyan">
							<image :src="item.img"></image>
							{{ item.perform_name }}
						</view>
					</view>
				</scroll-view>
				<button class="bang-btn" @tap="querenbiao()">确定</button>
			</view>
			<image class="closebangding" src="../../static/images/fan-close.png" @tap="querenbiao()"></image>
		</view>
		<!-- 吃饭类型选择框 -->
		<view class="tanchukuang" v-show="chifan_show">
			<view class="mark"></view>
			<view class="phone-kuang">
				<view class="bang-title">选择吃饭类型</view>
				<scroll-view class="gundong" scroll-y="true">
					<view class="">
						<view class="xuanze-item" v-for="(item, index) in chifanlist" :key="index" :data-id="item.id" @tap="xuanzechifan">
							<image :src="item.img"></image>
							{{ item.dine_name }}
						</view>
					</view>
				</scroll-view>
				<button class="bang-btn" @tap="querenchi()">确定</button>
			</view>
			<image class="closebangding" src="../../static/images/fan-close.png" @tap="querenchi()"></image>
		</view>
		<!-- 是否能够吸烟的弹出框 -->
		<view class="tanchukuang" v-show="xiyan_show">
			<view class="mark"></view>
			<view class="phone-kuang">
				<view class="bang-title">选择是否允许吸烟</view>
				<view>
					<scroll-view class="gundong" scroll-y="true">
						<view class="">
							<view class="xuanze-item" v-for="(item, index) in xiyanlist" :key="index" :data-id="item.id" @tap="xuanzexiyan">
								<image :src="item.img"></image>
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
				</view>
				<button class="bang-btn" @tap="quexiyan()">确定</button>
			</view>
			<image class="closebangding" src="../../static/images/fan-close.png" @tap="quexiyan()"></image>
		</view>
		<!-- 是否能调酒的弹出框 -->
		<view class="tanchukuang" v-show="tiaojiu_show">
			<view class="mark"></view>
			<view class="phone-kuang">
				<view class="bang-title">选择是否能调酒</view>
				<view>
					<scroll-view class="gundong" scroll-y="true">
						<view class="">
							<view class="xuanze-item" v-for="(item, index) in tiaojiulist" :key="index" :data-id="item.id" @tap="xuanzetiaojiu">
								<image :src="item.img"></image>
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
				</view>
				<button class="bang-btn" @tap="querentiaojiu()">确定</button>
			</view>
			<image class="closebangding" src="../../static/images/fan-close.png" @tap="querentiaojiu()"></image>
		</view>
		<mx-date-picker
			:show="showPicker"
			:type="type"
			:value="value"
			:showSeconds="showSeconds"
			:show-tips="true"
			:show-seconds="true"
			@confirm="onSelected"
			@cancel="onSelected"
		/>
		<!-- 图片怎么裁剪 -->
		<view class="content1" v-show="show_caijian">
			<view class="cropper-wrapper" :style="{height:height+'px'}">
				<canvas
					class="cropper"
					disable-scroll="true"
					@touchstart="touchStart"
					@touchmove="touchMove"
					@touchend="touchEnd"
					:style="{ width: cropperOpt.width, height: cropperOpt.height }"
					canvas-id="cropper"
				></canvas>
			</view>
			<view class="cropper-buttons">
				<view class="upload" @tap="uploadTap">重新选择</view>
				<view class="getCropperImage" @tap="getCropperImage">确定</view>
			</view>
		</view>
		<!-- 图片怎么裁剪 -->
	</view>
</template>

<script>
// import picker from "@/components/e-picker/e-picker.vue";//时间插件
import weCropper from '@/components/caijian/weCropper.js';
const device = uni.getSystemInfoSync();
const width = device.windowWidth;
const height = device.windowHeight;
import MxDatePicker from '@/components/mx-datepicker.vue'; //时间插件
import httpPath from '@/static/js/path.js';
import { getlogin } from '@/static/js/login.js';
export default {
	components: { MxDatePicker },
	data() {
		return {
			biaoyan_show: false,
			chifan_show: false,
			xiyan_show: false,
			tiaojiu_show: false,
			show_caijian: false,
			biaoyanlist: [],
			chifanlist: [],
			selctedbiao: {},
			selctedchi: {},
			selctedxiyan: {},
			selctedtiaojiu: {},
			xiyanlist: [
				{ id: '0', name: '不允许吸烟', checked: 0, img: '../../static/images/weixuanzhong.png' },
				{ id: '1', name: '允许吸烟', checked: 0, img: '../../static/images/weixuanzhong.png' }
			],
			tiaojiulist: [
				{ id: '0', name: '无调酒', checked: 0, img: '../../static/images/weixuanzhong.png' },
				{ id: '1', name: '有调酒', checked: 0, img: '../../static/images/weixuanzhong.png' }
			],
			currentTime: '',
			showPicker: false,
			date: '2019/01/01',
			time: '15:00:12',
			datetime: '2019/01/01 15:00:12',
			range: ['2019/01/01', '2019/01/06'],
			rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
			type: 'rangetime',
			value: '',
			time_type: 'start',
			start_time: '', //营业开始时间
			end_time: '', //营业结束时间
			imgs: [], //存储上传的照片
			logo: [], //存储门头logo
			poster: [], //海报
			name: '', //店铺名称
			phone: '', //店铺电话
			address: '', //店铺地址
			desk: '', //桌子数
			beer: '', //啤酒种类
			signature: '', //店铺签名,
			wxinfo_id: '',
			description: '', //店铺简介
			poster_synopsis: '', //海报公文
			thumb_m: '',
			btn_text: '保存',
			title: '装修店铺',
			province_id: '',
			city_id: '',
			county_id: '',
			xiangxi_dizhi: '',
			tel: '',
			avatar: '',
			cropperOpt: {
				id: 'cropper',
				width: width,
				height: height,
				scale: 2.5,
				zoom: 8,
				cut: {
					x: 0,
					y: 100,
					width: width,
					height: width
				}
			},
			weCropper: '',
			height:0
		};
	},
	onLoad(option) {
		this.height=height;
		this.biaoyanlist = [];
		this.chifanlist = [];
		this.getbiao_chi();
		this.userinfo = getlogin();
		this.wxinfo_id = this.userinfo.wxinfo_id;
		this.getinfo();
	},
	methods: {
		back() {
			uni.redirectTo({
				url: '../infoDetail/infoDetail'
			});
		},
		touchStart(e) {
			this.weCropper.touchStart(e);
		},
		touchMove(e) {
			this.weCropper.touchMove(e);
		},
		touchEnd(e) {
			this.weCropper.touchEnd(e);
		},
		convertBase64UrlToBlob(dataURI, type) {
			var binary = atob(dataURI.split(',')[1]);
			var array = [];
			for (var i = 0; i < binary.length; i++) {
				array.push(binary.charCodeAt(i));
			}
			return new Blob([new Uint8Array(array)], { type: type }, { filename: '1111.jpg' });
		},
		blobToDataURL(blob) {
			var a = new FileReader();
			a.readAsDataURL(blob); //读取文件保存在result中
			a.onload = function(e) {
				var getRes = e.target.result; //读取的结果在result中
				console.log(getRes);
			};
		},
		getCropperImage() {
			let _this = this;
			//let pathurl = url + '/user/upload';上传服务器地址
			this.weCropper.getCropperImage(avatar => {
				if (avatar) {
					_this.show_caijian = false;
					_this.upimgs(avatar, _this.type);
					console.log(_this.type);
				} else {
					console.log('获取图片失败，请稍后重试');
				}
			});
		},
		uploadTap() {
			const self = this;
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success(res) {
					let src = res.tempFilePaths[0];
					//  获取裁剪图片资源后，给data添加src属性及其值
					self.weCropper.pushOrign(src);
				}
			});
		},
		/**
		 * 点击电话按钮打电话
		 */
		gophone() {
			uni.makePhoneCall({
				phoneNumber: this.tel //仅为示例
			});
		},
		/**
		 * @param {Object} img预览图片
		 */
		yulan(img) {
			uni.previewImage({
				urls: [img],
				longPressActions: {
					// itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		/**
		 * 获取当前信息
		 */
		getinfo() {
			uni.request({
				url: httpPath.filePath + '/index/store/merchant',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						this.tel = res.data.data.tel;
						this.xiangxi_dizhi = res.data.data.address;
						this.name = res.data.data.name;
						this.address = res.data.data.detail_address;
						this.beer = res.data.data.beer;
						this.phone = res.data.data.phone;
						this.poster_synopsis = res.data.data.poster_synopsis;
						this.signature = res.data.data.signature;
						this.description = res.data.data.description;
						this.end_time = res.data.data.end_time;
						this.start_time = res.data.data.start_time;
						this.desk = res.data.data.desk;
						if (res.data.data.mixed_drink == 0) {
							this.selctedtiaojiu = this.tiaojiulist[0];
						} else if (res.data.data.mixed_drink == 1) {
							this.selctedtiaojiu = this.tiaojiulist[1];
						}
						if (res.data.data.smoke == 0) {
							this.selctedxiyan = this.xiyanlist[0];
						} else if (res.data.data.smoke == 1) {
							this.selctedxiyan = this.xiyanlist[1];
						}
						this.selctedbiao = {
							id: res.data.data.perform.id,
							perform_name: res.data.data.perform.perform_name,
							checked: 0,
							img: '../../static/images/weixuanzhong.png'
						};
						this.selctedchi = { id: res.data.data.dine_type.id, dine_name: res.data.data.dine_type.dine_name, checked: 0, img: '../../static/images/weixuanzhong.png' };
						this.btn_text = '修改店铺信息';
						this.title = '修改店铺信息';
						uni.setNavigationBarTitle({
							title: this.title
						});
						this.logo = [{ id: res.data.data.logo.id, img: res.data.data.logo.filepath }];
						this.poster = [{ id: res.data.data.poster.id, img: res.data.data.poster.filepath }];
						this.imgs = [];
						for (let i = 0; i < res.data.data.thumb.length; i++) {
							// this.thumb_m += res.data.data.thumb[i].id + ',';
							this.imgs.push({ id: res.data.data.thumb[i].id, img: res.data.data.thumb[i].filepath });
						}
						this.province_id = res.data.data.province.id;
						this.city_id = res.data.data.city.id;
						this.county_id = res.data.data.county.id;
					} else if (res.data.code == 201) {
						this.btn_text = '保存';
						this.title = '装修店铺';
						uni.setNavigationBarTitle({
							title: this.title
						});
						this.name = res.data.data.name;
						this.address = res.data.data.detail_address;
						this.xiangxi_dizhi = res.data.data.address;
						this.province_id = res.data.data.province.id;
						this.city_id = res.data.data.city.id;
						this.county_id = res.data.data.county.id;
					}
				}
			});
		},
		/**
		 * 保存
		 */
		save() {
			this.thumb_m = '';
			if (this.imgs.length != 0) {
				for (let i = 0; i < this.imgs.length; i++) {
					this.thumb_m += this.imgs[i].id + ',';
				}
				console.log('thumb_m' + this.thumb_m);
			}
			let $phone = /^1(3|4|5|6|7|8|9)\d{9}$/;
			if (!this.phone) {
				uni.showModal({
					showCancel: false,
					content: '请填写手机号'
				});
				return false;
			} else if (!$phone.test(this.phone)) {
				uni.showModal({
					showCancel: false,
					content: '请填写正确的手机号'
				});
				return false;
			}
			if (!this.start_time) {
				uni.showModal({
					showCancel: false,
					content: '请选择开始时间'
				});
				return false;
			}
			if (!this.end_time) {
				uni.showModal({
					showCancel: false,
					content: '请选择结束时间'
				});
				return false;
			}
			if (!this.selctedbiao.id) {
				uni.showModal({
					showCancel: false,
					content: '请选择表演类型'
				});
				return false;
			}
			if (!this.desk) {
				uni.showModal({
					showCancel: false,
					content: '请填写桌子数'
				});
				return false;
			}
			if (!this.selctedxiyan.id) {
				uni.showModal({
					showCancel: false,
					content: '请选择是否允许吸烟'
				});
				return false;
			}
			if (!this.beer) {
				uni.showModal({
					showCancel: false,
					content: '请填写啤酒种类数'
				});
				return false;
			}
			if (!this.selctedtiaojiu.id) {
				uni.showModal({
					showCancel: false,
					content: '请选择是否可以调酒'
				});
				return false;
			}
			if (!this.selctedchi.id) {
				uni.showModal({
					showCancel: false,
					content: '请选择店内餐饮类型'
				});
				return false;
			}
			if (this.logo.length == 0) {
				uni.showModal({
					showCancel: false,
					content: '请上传门头照或者logo'
				});
				return false;
			}
			if (!this.thumb_m) {
				uni.showModal({
					showCancel: false,
					content: '请上传店内照片'
				});
				return false;
			}
			// if (this.poster.length == 0) {
			// 	uni.showModal({
			// 		showCancel: false,
			// 		content: '请上传海报照片'
			// 	});
			// 	return false;
			// }
			if (!this.signature) {
				uni.showModal({
					showCancel: false,
					content: '请填写店铺签名'
				});
				return false;
			}
			if (!this.description) {
				uni.showModal({
					showCancel: false,
					content: '请填写店铺简介'
				});
				return false;
			}
			// if (!this.poster_synopsis) {
			// 	uni.showModal({
			// 		showCancel: false,
			// 		content: '请填写海报文案'
			// 	});
			// 	return false;
			// }

			var reg = /,$/gi;
			this.thumb_m = this.thumb_m.replace(reg, '');
			let poster = '';
			if (this.poster.length != 0) {
				poster = this.poster[0].id;
			}
			let data = {
				wxinfo_id: this.wxinfo_id,
				name: this.name,
				phone: this.phone,
				address: this.xiangxi_dizhi,
				start_time: this.start_time,
				end_time: this.end_time,
				perform: this.selctedbiao.id,
				desk: this.desk,
				smoke: this.selctedxiyan.id,
				beer: this.beer,
				mixed_drink: this.selctedtiaojiu.id,
				dine_type: this.selctedchi.id,
				logo: this.logo[0].id,
				thumb: this.thumb_m,
				poster: poster,
				signature: this.signature,
				description: this.description,
				poster_synopsis: this.poster_synopsis,
				county: this.county_id,
				city: this.city_id,
				province: this.province_id
			};
			uni.request({
				url: httpPath.filePath + '/index/store/publish',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: data,
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data) {
							uni.showModal({
								content: '提交成功'
							});
						}
					}
				}
			});
		},
		/**
		 * 删除上传照片中的图片
		 */
		delimgs(e) {
			let index = e.currentTarget.dataset.index;
			this.imgs.splice(index, 1);
			this.thumb_m.splice(index, 1);
		},
		/**
		 * @param {Object} type删除单张图片
		 */
		delimg(type) {
			let $this = this;
			switch (type) {
				case 1:
					{
						$this.logo = [];
					}
					break;
				case 2:
					{
						$this.poster = [];
					}
					break;
			}
		},
		upimgs(img, type) {
			let $this = this;
			uni.uploadFile({
				url: httpPath.filePath + '/index/common/upload_m', //仅为示例，非真实的接口地址
				filePath: img,
				name: 'img',
				formData: {
					user: 'test'
				},
				success(res) {
					let data = JSON.parse(res.data);
					if (data.code == 1) {
						switch (type) {
							case 1:
								{
									$this.logo = [];
									$this.logo.push({ id: data.id, img: httpPath.filePath + data.msg });
								}
								break;
							case 2:
								{
									$this.imgs.push({ id: data.id, img: httpPath.filePath + data.msg });
								}
								break;
							case 3:
								{
									$this.poster = [];
									$this.poster.push({ id: data.id, img: httpPath.filePath + data.msg });
								}
								break;
						}
					} else {
						uni.showModal({
							showCancel: false,
							content: data.msg
						});
					}
				}
			});
		},
		/**
		 * 上传图片
		 */
		upload(type) {
			let $this = this;
			let img_num = 0;
			$this.type = type;
			if (type == 2) {
				if (this.imgs.length >= 8) {
					uni.showModal({
						showCancel: false,
						content: '最多只能上传八张'
					});
					return false;
				}
				$this.cropperOpt.cut.height = width;
			} else if (type == 3) {
				$this.cropperOpt.cut.height = 220;
			} else {
				$this.cropperOpt.cut.height = width;
			}

			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				success: function(res) {
					let src = res.tempFilePaths[0];
					Object.assign($this.cropperOpt, {
						src
					});
					$this.weCropper = new weCropper($this.cropperOpt)
						.on('ready', function(ctx) {})
						.on('beforeImageLoad', ctx => {
							uni.showToast({
								title: '上传中',
								icon: 'loading',
								duration: 3000
							});
						})
						.on('imageLoad', ctx => {
							uni.hideToast();
						});
					$this.show_caijian = true;
				}
			});
		},
		onShowDatePicker(type, time_type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
			this.time_type = time_type;
		},
		onSelected(e) {
			//选择
			this.showPicker = false;
			if (e) {
				if (this.time_type == 'start') {
					this.start_time = e.value;
				} else {
					this.end_time = e.value;
				}
				this[this.type] = e.value;
				//选择的值
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
			}
		},
		/**
		 * 点击是否吸烟出现吸烟框
		 */
		showxiyan() {
			this.xiyan_show = true;
		},
		/**
		 * 点击是否吸烟出现吸烟框
		 */ showtiaojiu() {
			this.tiaojiu_show = true;
		},
		/**
		 * 确认吸烟类型
		 */
		quexiyan() {
			this.xiyan_show = false;
		},
		/**
		 * 确认调酒
		 */ querentiaojiu() {
			this.tiaojiu_show = false;
		},
		/**
		 * 确认表演类型
		 */ querenbiao() {
			this.biaoyan_show = false;
		},
		/**
		 * 确定吃饭类型
		 */
		querenchi() {
			this.chifan_show = false;
		},
		/**
		 * @param {Object} 选择吸烟类型
		 */
		xuanzexiyan(e) {
			let id = e.currentTarget.dataset.id;
			for (let i = 0; i < this.xiyanlist.length; i++) {
				if (this.xiyanlist[i].id == id) {
					this.selctedxiyan = this.xiyanlist[i];
					this.xiyanlist[i].checked = 1;
					this.xiyanlist[i].img = '../../static/images/xuanzhong.png';
				} else {
					this.xiyanlist[i].checked = 0;
					this.xiyanlist[i].img = '../../static/images/weixuanzhong.png';
				}
			}
		},
		/**
		 * @param {Object} 选择调酒类型
		 */
		xuanzetiaojiu(e) {
			let id = e.currentTarget.dataset.id;
			for (let i = 0; i < this.tiaojiulist.length; i++) {
				if (this.tiaojiulist[i].id == id) {
					this.selctedtiaojiu = this.tiaojiulist[i];
					this.tiaojiulist[i].checked = 1;
					this.tiaojiulist[i].img = '../../static/images/xuanzhong.png';
				} else {
					this.tiaojiulist[i].checked = 0;
					this.tiaojiulist[i].img = '../../static/images/weixuanzhong.png';
				}
			}
		},
		/**
		 * @param {Object} 选择吃饭类型
		 */ xuanzechifan(e) {
			let id = e.currentTarget.dataset.id;
			for (let i = 0; i < this.chifanlist.length; i++) {
				if (this.chifanlist[i].id == id) {
					this.selctedchi = this.chifanlist[i];
					this.chifanlist[i].checked = 1;
					this.chifanlist[i].img = '../../static/images/xuanzhong.png';
				} else {
					this.chifanlist[i].checked = 0;
					this.chifanlist[i].img = '../../static/images/weixuanzhong.png';
				}
			}
		},
		/**
		 * 选择表演类型
		 */
		xuanzebiaoyan(e) {
			let id = e.currentTarget.dataset.id;
			for (let i = 0; i < this.biaoyanlist.length; i++) {
				if (this.biaoyanlist[i].id == id) {
					this.selctedbiao = this.biaoyanlist[i];
					this.biaoyanlist[i].checked = 1;
					this.biaoyanlist[i].img = '../../static/images/xuanzhong.png';
				} else {
					this.biaoyanlist[i].checked = 0;
					this.biaoyanlist[i].img = '../../static/images/weixuanzhong.png';
				}
			}
		},
		/**
		 * 点击吃饭出现选择框
		 */
		chifanshow() {
			if (this.chifanlist.length == 0) {
				uni.showModal({
					content: '暂时没有吃饭类型，请稍后选择'
				});
			} else {
				this.chifan_show = true;
			}
		},
		/**
		 * 点击表演出现选择框
		 */
		showbiaoyan() {
			if (this.biaoyanlist.length == 0) {
				uni.showModal({
					content: '暂时没有表演类型，请稍后选择'
				});
			} else {
				this.biaoyan_show = true;
			}
		},
		/**
		 * 获取表演与吃饭类型
		 */
		getbiao_chi() {
			uni.request({
				url: httpPath.filePath + '/index/property/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {},
				success: res => {
					if (res.data.code == 200) {
						this.biaoyanlist = [];
						this.chifanlist = [];
						if (res.data.data.perform.length != 0) {
							let list = res.data.data.perform;
							for (let i = 0; i < list.length; i++) {
								this.biaoyanlist.push({ id: list[i].id, perform_name: list[i].perform_name, checked: 0, img: '../../static/images/weixuanzhong.png' });
							}
						}
						if (res.data.data.dine.length != 0) {
							let list = res.data.data.dine;
							for (let i = 0; i < list.length; i++) {
								this.chifanlist.push({ id: list[i].id, dine_name: list[i].dine_name, checked: 0, img: '../../static/images/weixuanzhong.png' });
							}
						}
					}
				}
			});
		}
	}
};
</script>

<style>
textarea {
	z-index: 0;
}
.content1 {
	position: fixed;
	top: 0rpx;
	left: 0px;
	width: 100%;
	bottom: 0px;
	z-index: 10000;
	background: rgba(255, 255, 255, 1);
}

.head-list {
	height: 43px;
	width: 100%;
	background: #ffffff;
	justify-content: center;
	align-items: center;
	display: flex;
	border-bottom: 1px solid rgba(244, 244, 244, 1);
}

.head-info {
	text-align: center;
	font-size: 18px;
	color: #000000;
	font-weight: bold;
}

.save-box {
	position: absolute;
	right: 0px;
	width: 50px;
	height: 43px;
	line-height: 43px;
}

.save {
	color: rgba(98, 111, 252, 1);
	font-size: 16px;
	font-weight: 400;
}

.icon-back {
	margin-top: 11px;
	width: 10px;
	height: 18px;
	color: #000000;
	margin-left: 6px;
}

.icon-back-box {
	display: block;
	position: absolute;
	left: 6px;
	height: 43px;
	width: 30px;
	align-items: center;
}
.cropper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cropper-buttons {
	background-color: rgba(0, 0, 0, 0.95);
	color: #04b00f;
	z-index: 1000000000;
}
.cropper-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: #f0f0f0;
}

.cropper-buttons {
	width: 100vw;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	line-height: 50px;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
	width: 50%;
	text-align: center;
}

.up-item {
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.gundong {
	height: 300rpx;
}
.tanchukuang {
	z-index: 10000;
}
.phone-kuang {
	position: fixed;
	top: 340rpx;
	left: 32rpx;
	width: 686rpx;
	background: #ffffff;
	border-radius: 5px;
	padding: 80rpx 45rpx;
	box-sizing: border-box;
}
.bang-title {
	font-size: 32rpx;
	text-align: center;
	font-weight: bold;
}
.bang-item {
	height: 60rpx;
	line-height: 60rpx;
	margin-top: 40rpx;
}
.bang-item image {
	width: 45rpx;
	height: 45rpx;
	vertical-align: middle;
	margin-right: 64rpx;
}
.bang-item input {
	border: none;
	font-size: 28rpx;
}
.code-btn {
	width: 129rpx;
	height: 64rpx;
	color: rgba(56, 209, 128, 1);
	border: 1px solid rgba(56, 209, 128, 1);
	border-radius: 12rpx;
	position: absolute;
	top: -15rpx;
	font-size: 28rpx;
	right: 10rpx;
}
.bang-btn {
	margin-top: 80rpx;
	width: 404rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(51, 51, 51, 1));
	border-radius: 45rpx;
	font-size: 28rpx;
	color: #ffffff;
}
.closebangding {
	width: 54rpx;
	height: 54rpx;
	position: fixed;
	bottom: 120rpx;
	left: calc(50% - 27rpx);
}
.input-container textarea {
	box-sizing: border-box;
}
.xuanze-item {
	height: 80rpx;
	font-size: 28rpx;
	color: #666666;
	line-height: 80rpx;
	padding-left: 150rpx;
}
.xuanze-item image {
	width: 36rpx;
	height: 36rpx;
	vertical-align: middle;
	margin-right: 20rpx;
}
</style>
